<template>
	<view>
		<u-form :model="form" ref="uForm" :rules="rules" id="form-container">
			<u-form-item label="设备条码" :label-width="labelWidth" class="u-flex u-flex-nowrap">
				<div class="u-flex u-flex-nowrap u-row-between">
					<u-input placeholder="请扫码获取设备条码" v-model="form.deviceBarcode"/>
					<u-button type="success" size="mini" @click="scanFun">扫码</u-button>
				</div>
			</u-form-item>
			<u-form-item label="机台编号" :label-width="labelWidth">
				<u-input placeholder="请输入机台编号" v-model="form.machineId" />
			</u-form-item>
			<u-form-item label="排产数量" :label-width="labelWidth">
				<u-input placeholder="请输入排产数量" v-model="form.completionQuantity" />
			</u-form-item>
			<u-form-item class="u-flex u-row-center">
				<u-button type="success" size="medium" @click="postForm">提交</u-button>
			</u-form-item>
		</u-form>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { machineScan } from '../../utils/index.js'
export default {
	data() {
		return {
			form: {
				deviceBarcode: '',
				machineId: '',					 	//机台编号
				completionQuantity: ''				//元件生产数量（排产数量）
				
			},
			labelWidth: 160,						//表单每一项的宽度
		}
	},
	methods: {
		// 点击按钮，启用扫码函数
		scanFun() {
			let that = this
			uni.scanCode({
				onlyFromCamera: true,
				success: function (res) {
					that.form.deviceBarcode = res.result
				},
				fail() {
					console.log('识别失败')
				}
			})
		},
		// 提交表单函数
		async postForm() {
			const { data } = await machineScan(this.form)
			const errInfo = data.msg
			console.log(errInfo)
			if(data.code == '1') {
				this.$refs.uToast.show({
					title: errInfo,
					type: 'success',
					icon: true
				})
			} else {
				this.$refs.uToast.show({
					title: errInfo,
					type: 'error',
					icon: true
				})
			}
		}
	  }
	}
</script>

<style lang="scss" scoped>
#form-container ::v-deep .u-form-item {
	margin-top: 15rpx;
	padding: 10rpx 30rpx;
}
</style>
